import React from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './Header.css'
class  Header extends React.Component {
    focue = React.createRef()

    static propTypes = {
        addList: PropTypes.func.isRequired
    }
    componentDidMount() {
        this.focue.current.focus()
    }

    Focus = () => {
        console.log(this.focue)
        this.focue.current.className = 'input_border'
    }
    handleKeyUp = (event) => {
        const {keyCode,target} = event
        if(keyCode !== 13) return
        if(target.value.trim() === ''){
            alert('输入不能为空！')
            return
        }
        const todoObj = {id: nanoid(),name:target.value,done:false}
        // 添加数据
        this.props.addList(todoObj)
        target.value = ''
    }
    render(){
        return(
            <div className="Header">
                <input onKeyUp={this.handleKeyUp} ref={this.focue} onFocus={ this.Focus} type="text" placeholder='请输入任务'/>
            </div>
        )
    }
}
export default Header